import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  // 修改功能
  handle = (e) => {
    // 要修改App组件中todoList数组中指定的某个对象的isDone
    // 要获取到被修改的数据的id
    const id = this.props.todo.id
    // 把id传递给App组件
    this.props.getTodoIdUpdate(id)
  }

  // 删除功能
  delHandle = () => {
    // 要删除的数据id
    const id = this.props.todo.id

    // 把id传递给App组件
    this.props.getTodoIdDel(id)
  }
  render() {
    const { todo } = this.props
    return (
      <li>
        <label>
          <input type="checkbox" checked={todo.isDone} onChange={this.handle} />
          <span className={todo.isDone ? 'active' : ''}>{todo.todoName}</span>
        </label>
        <button className="btn btn-danger" onClick={this.delHandle}>
          删除
        </button>
      </li>
    )
  }
}
